<template>
		<scroll-view refresher-background="#F5F5F5" :scroll-y='true' @scrolltolower="nextPage" @refresherrefresh="refresh" refresher-enabled :refresher-triggered='downPull' class="info-list">
			<view v-for="(item,index) in data" :key="item.id" class="list-item">
					<view @click="go({t:1,url:'/yb_shd/dp/pay-face-info?id=' + item.id})">
						<view class="f-x-bt">
							<view>
								<text class="f46 wei">￥{{item.money}}</text>
							</view>
							<view>
								<text class="f28 wei mr10">{{getPayMode(item.payMode)}}</text>
							</view>
						</view>
						<view class="f-y-bt b-b-d-f5 pb20">
							<text class="f24">用户信息：<text v-if="item.userId">{{item.userName}}（UID：{{item.userId}}）</text></text>
							<text class="f24 c3">支付时间：{{item.payAt}}</text>
						</view>
						<view class="mt20">
							<view class="t-r f28">
									<text>预计收入：<text class="wei">+￥{{item.storeActualMoney}}</text></text>
							</view>
						</view>
					</view>
					<view class="f-x-e mt40">
						<view class=" f-bt btn f22 wei">
							<view style="color: #999;border-color: #999;"  @click="changeOrder(item.id,'print')">打印小票</view>
						</view>
						
					</view>
			</view>
			<!-- 空布局 -->
			<mescroll-empty v-if="data.length === 0"></mescroll-empty>
		</scroll-view>
	
</template>

<script>
	import MescrollEmpty from '@/mescroll-uni/components/mescroll-empty.vue';
	import utils from '@/common/utils.js'
	export default {
		components: {
			MescrollEmpty
		},
		props:{
			data: {
				type: Array,
				default:[]
			},
			orderType:{
				type: [String,Number],
				default:'1'
			},
			downPull:{
				type: Boolean,
				default: false
			}
		},
		data(){
			return{}
		},
		methods:{
			refresh:utils.throttle(function(e) {
				this.$emit('refresh')
			}),
			nextPage:utils.throttle(function(e) {
				this.$emit('nextPage')
			}),
			changeOrder(id,type){
				var text = ""
				var param = {
					orderId:id,
					type:type
				}
				switch(param.type){
					
					case 'call':
						text = '您确认要提醒用户取餐并叫号吗？'
						break;
					case 'confirm':
						text = '您确认要完成此订单吗？'
						break;
					case 'receipt':
						text = '您确认要接单吗？'
						break;
					case 'rejection':
						text = '您确认要拒绝此订单吗？'
						break;
				}
				this.util.modal(text).then(async res=>{
					try{
						let {msg} = await this.util.request({
							'url': this.api.modifyFastOrder,
							method:"post",
							data:param
						})
						this.util.message(msg, 3, 2000)
						this.$emit('refresh')
					}catch(e){
						this.util.message(e.msg, 3, 2000)
					}
					
				});
			},
			getPayMode(mode){
				let info={
					payMode:''
				}
				// 1微信支付2支付宝支付5.余额支付6线下结账7pos机 8自有微信9自有支付宝
				switch(mode){
					case '1':
						info.payMode = '微信支付'
					break;
					case '2':
						info.payMode = '支付宝支付'
					break;
					case '5':
						info.payMode = '余额支付'
					break;
					case '6':
						info.payMode = '现金支付'
					break;
					case '7':
						info.payMode = '7pos'
					break;
					case '8':
						info.payMode = '自有微信'
					break;
					case '9':
						info.payMode = '自有支付宝'
					break;
				}
				return info.payMode
			}
		}
	}
</script>

<style scoped lang="scss">
	.info-list{
		height: calc(100vh - 264rpx); //或者通过js 获取元素属性的形式进行高度计算
		padding-top: 20rpx;
		background: #F5F5F5;
	}
	.list-item{
		width: 700rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
	}
	.btn view{
		width: 150rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border: 2rpx solid #000;
		border-radius: 50rpx;
		margin-left: 10rpx;
	}
	.tag{
		padding: 10rpx 20rpx;
		background: #FEF5E4;
		color: #E4AD56;
	}
</style>
